<template>
	<view class="equi-detail-container">
		<view class="equi-detail-info box">
			<view class="equi-id">
				<view class="equi-image">
					<image :src="$getImageSrc('equipment_detail.png')" mode="widthFix"></image>
				</view>
				<view class="equi-name">
					<view class="title">
						<text>{{equipmentDetail.name}}</text>
						<image :src="$getImageSrc('edit.png')" mode="widthFix"></image>
					</view>
					<view class="id">
						<text>{{equipmentDetail.equipmentCode}}</text>
						<image :src="$getImageSrc('QRcode_icon.png')" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="equi-info-list">
			  <view class="info-list-item" v-for="(item,index) in equiInfoList" :key="index" v-if="item.show">
			    <view class="item-title">
			      {{item.title}}
			    </view>
			    <view class="item-content">
			      <text>{{item.content ? item.content : '暂无数据'}}</text>
			    </view>
			    <uni-icons v-if="index == 4" class="right address-right" color="#999" type="right"></uni-icons>
			  </view>
			</view>
		</view>
		<view class="run-data box">
			<view class="title">
				<view style="color: #181D21;font-weight: bold;">运行数据</view>
				<view style="color: #00B23B; font-size: 24rpx;" @click="runLog">历史数据记录</view>
			</view>
			<view class="run-time">
				最新数据时间：2025-01-08 12:13:05
			</view>
			<view class="equi-status">
				<view class="status" v-for="(item,index) in runData" :key="index">
					<view class="status-title">{{item.label}}</view>
					<view  class="status-content">{{item.value ? item.value : '暂无数据'}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import echarts from '../../components/echarts-uniapp/echarts-uniapp.vue'
	import {getequipmentDetail,getDetailedData,getDataDetailInfo} from '../../untils/api.js'
	export default {
		components: {
			echarts
		},
		data() {
			return {
				range:[],
				equiInfoList: [
				  { title: '已用流量', content: '', show: true },
				  { title: '本月剩余流量', content: '', show: true },
				  { title: '设备分类', content: '6要素气象', show: true },
				  { title: '物联网卡', content: '汉姜—远程3型1', show: true },
				  { title: '经纬度', content: '103.94253844860224，30.90609245860277', show: true },
				  { title: '设备位置', content: '四川省成都市郫都区竹唐路唐昌 镇留驾村', show: true },
				],
				optionSignal:{},
				optionVoltage:{},
				equipmentId:'',
				equipmentDetail:{},
				chartList:[],
				vbatObj:{},
				runData:[
					{label:'设备状态',value:''},
					{label:'运行模式',value:''},
					{label:'当前加热时间',value:''},
					{label:'当前震动时间',value:''},
					{label:'当前拍照间隔',value:''},
					{label:'当前运行时间',value:''},
				]
			};
		},
		methods:{
			runLog() {
				uni.navigateTo({
					url:'/subpackage/insect/porperties'
				})
			},
			getDateSevenDaysAgo() {
				const today = new Date(); // 获取当前日期
			    const sevenDaysAgo = new Date(today); // 复制当前日期
			    sevenDaysAgo.setDate(today.getDate() - 7); // 设置为前第七天
				const year = today.getFullYear(); // 获取年份
				const month = String(today.getMonth() + 1).padStart(2, '0'); // 获取月份（补零）
				const day = String(today.getDate()).padStart(2, '0'); // 获取日期（补零）
								
				// 格式化为 YYYY-MM-DD
				const currDate= `${year}-${month}-${day}`;
			
			    // 格式化为 YYYY-MM-DD
			    const formattedDate = sevenDaysAgo.toISOString().split('T')[0];
			    return [formattedDate,currDate];
			},
			changeDate(e) {
				// this.initChart()
			},
			// 获取电压数据
			async getDetailedDataV(code) {
				const res = await getDetailedData(code)
				this.vbatObj = res.data.find(item => item.circuit == 'vbat')
				// this.initChart()
			},
			async initChart() {
				this.optionSignal = {}
				// uni.showLoading({
				// 	title:'加载中',
				// 	mask: true, // 是否显示透明蒙层，防止触摸穿透
				// })
				const params = {
					circuit:this.vbatObj.circuit,
					equipmentCode:this.vbatObj.equipmentCode,
					startingTime:this.range[0],
					endTime:this.range[1],
				}
				const res = await getDataDetailInfo(params)
				console.log(res,'reeeeeeeeeee');
				uni.hideLoading()
				const chartData = res.data.map(item => item.newestData)
				const chartTime = res.data.map(item => item.newestTime)
				let title = {}
				if(chartData.length > 0) {
					title =  {
						text: this.vbatObj.name,
						textStyle: {
							fontSize: 14 // 设置标题文字的大小为24
						},
					}
				}else {
					title = {
						text: '暂无数据',
						left: 'center',
						top: 'middle',
						textStyle: {
							color: '#A1A3A5',
							fontSize: 16
						},
					}
				}
				this.optionSignal =  {
					title: title,
					grid: {
					        // 调整图表的位置和大小，top 表示图表顶部与容器顶部的距离
					        top: '15%', 
					        // 其他 grid 属性，如 left、right、bottom、containLabel 等可根据需要设置
					        left: '3%',
					        right: '4%',
					        bottom: '15%',
					        containLabel: true
					      },
					xAxis: {
						type: 'category',
						data: chartTime,
						show:chartData.length > 0 ? true : false
					},
					yAxis: {
						show:chartData.length > 0 ? true : false,
						type: 'value',
						axisLabel: {
							showMinLabel: true, // 显示最小值标签
							showMaxLabel: true, // 显示最大值标签
							interval: 'auto' // 自动调整间隔
						}
					},
					series: [{
						data: chartData,
						type: 'line',
						color: '#43C722'
					}]
				};
			},
			getDetailedData(id) {
			  getequipmentDetail(id).then(res => {
			    if(res.code == 200) {
			      const detail = res.data
			      this.equipmentDetail = res.data
			
			      this.equiInfoList.map((item,index) => {
			        if(index == 0) {
			          item.content = detail.card
			          item.show = !!detail.card // 如果 card 有值则显示，否则隐藏
			        }
			        if(index == 1) {
			          item.content = detail.usedTraffic
			          item.show = !!detail.usedTraffic
			        }
			        if(index == 2) {
			          item.content = detail.remainingTraffic
			          item.show = true
			        }
			        if(index == 3) {
			          item.content = detail.equipmentType
			          item.show = true // 其他项默认显示
			        }
			        if(index == 4) {
			          item.content = detail.address
			          item.show = true
			        }
			        if(index == 5) {
			          item.content = detail.positioning
			          item.show = true
			        }
			      })
			      uni.hideLoading()
			    }
			  }).catch(err => {
			    uni.hideLoading()
			  }).finally(() => {
			    uni.hideLoading()
			  })
			}
		},
		onLoad(options) {
			this.range = this.getDateSevenDaysAgo()
			this.getDetailedData(options.id)
			// this.getChartData(options.equipmentCode)
			this.getDetailedDataV(options.equipmentCode)
		},
		onReady() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.equi-detail-container {
		width: 750rpx;
		height: 100%;
		overflow: auto;
		background: #F4F5F5;
		.equi-detail-info {
			margin-top: 18rpx;
			overflow: hidden;
			height: 720rpx;
			.equi-id {
				display: flex;
				align-items: center;
				margin-top: 36rpx;
				height: 196rpx;
				margin-left: 24rpx;
				border-bottom: 2rpx solid #ECECEC;
				.equi-image {
					width: 160rpx;
					height: 160rpx;
					image {
						width: 100%;
					}
				}
				.equi-name {
					height: 160rpx;
					margin-left: 24rpx;
					.title {
						display: flex;
						align-items: center;
						font-weight: 500;
						font-size: 30rpx;
						color: #181D21;
						image {
							margin-left: 14rpx;
							width: 32rpx;
						}
					}
					.id {
						margin-top: 24rpx;
						display: flex;
						align-items: center;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						image {
							margin-left: 14rpx;
							width: 32rpx;
						}
					}
				}
			}
			.equi-info-list {
				margin:0 24rpx;
				margin-top: 38rpx;
				.info-list-item {
					font-weight: 400;
					height: 68rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.item-title {
						width: 160rpx;
						font-size: 24rpx;
						color: #929496;
					}
					.item-content {
						text-align: right;
						margin-right: 10rpx;
						position: relative;
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
						color: #181D21;
						overflow: hidden;
						  text-overflow: ellipsis;
						  display: -webkit-box;
						  -webkit-line-clamp: 2;
						  -webkit-box-orient: vertical;
						.address-right {
							position: absolute;
							right: 0;
						}
					}
				}
			}
		}
		.run-data {
			box-sizing: border-box;
			padding: 0 24rpx;
			overflow: hidden;
			margin-top: 18rpx;
			height: 680rpx;
			.run-time {
				margin: 32rpx auto;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 400;
				font-size: 24rpx;
				width: 100%;
				height: 64rpx;
				background: #F5F5F5;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
			.status-title {
				font-weight: 400;
				font-size: 24rpx;
				color: #929496;
			}
			.status-content {
				font-weight: 500;
				font-size: 32rpx;
				color: #181D21;
				margin-top: 8rpx;
			}
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 32rpx 0 0 0;
				font-weight: 500;
				font-size: 30rpx;
				color: #181D21;
			}
			.equi-status {
				display: grid;
				grid-template-columns: repeat(2,1fr);
				gap: 8rpx;
				/* 设置左对齐 */
				justify-content: start;
				.status{
					height: 60rpx;
					margin: 10px 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}
			}
		}
		.signal-chart {
			box-sizing: border-box;
			padding: 24rpx;
			margin-top: 18rpx;
			height: 476rpx;
			margin-bottom: 40rpx;
		}
		.voltage-chart {
			margin-top: 18rpx;
			height: 476rpx;
			margin-bottom: 30rpx;
		}
	}
::v-deep .uni-date-x--border {
		border-radius: 20px;
		overflow: hidden;
	}
</style>
